import React, { useEffect, useState } from 'react';
import { Button, Modal, Space } from 'antd';
import { Input } from 'antd';
import axios from 'axios';
import qs from 'qs'
import logo from '../static/logo.jpg'
import phone from '../static/phone.png'
import paww from '../static/paww.png'
const App: React.FC = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [inputValue, setInputValue] = useState({
        mobile: '',
        areaCode: '',
        password: ''
    });

    const showModal = () => {
        setIsModalOpen(true);
    };
    useEffect(() => {
        showModal()
    }, [1])
    const handleOk = () => {
     
        if (inputValue.mobile && inputValue.areaCode && inputValue.password) {
            if(inputValue.areaCode.indexOf('+')==-1){
                inputValue.areaCode = '+'+inputValue.areaCode
            }
            axios.post("https://app-api.ime.top/api/user/user/pc/login/nodecrypt",
                qs.stringify(inputValue)
                , { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        localStorage.setItem("account", res.data.data.info.accid)
                        localStorage.setItem("token", res.data.data.info.token)
                        window.location.reload()
                    } else {
                        alert(res.data.msg)
                        window.location.reload()
                    }


                })
            setIsModalOpen(false);
        } else {
            alert("请输入完整信息")
        }
        // localStorage.setItem("accid", "1")
        // window.location.reload()

    };
    const handle1 = (e: any) => {
        setInputValue({ ...inputValue, mobile: e.target.value })
    }
    const handle2 = (e: any) => {
        setInputValue({ ...inputValue, areaCode: e.target.value })
    }
    const handle3 = (e: any) => {
        setInputValue({ ...inputValue, password: e.target.value })
    }
    return (

        <>

            <div style={{ width: '100vw', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: "#F7F8FC" }}>
                <div style={{
                    width: '320px',
                    height: '410px',
                    boxShadow: '0px 4px 40px 0px rgba(0,0,0,0.1), 0px 2px 8px 0px rgba(0,0,0,0.1)',
                    backgroundColor: '#fff',
                    borderRadius: '20px',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <img src={logo} style={{ width: '70px', height: '70px', marginBottom: '30px' }} />
                    <div style={{
                        marginBottom: '10px',
                        width: '260px',
                        height: '46px',
                        background: '#F2F3F7',
                        borderRadius: '10px',
                        display: 'flex',
                        alignItems: 'center'
                    }}>
                        <img src={phone} style={{ width: '20px', height: '20px', marginLeft: '10px' }} />
                        <input placeholder="+86" value={inputValue.areaCode} onChange={handle2} style={{
                            border: "none",
                            outline: "none",
                            width: '40px',
                            height: '100%',
                            marginLeft: '10px',
                            display: "block",
                            lineHeight: "46px",
                            background: "none"
                        }} />
                        
                        <input placeholder="请输入手机号" value={inputValue.mobile} onChange={handle1} style={{
                            display: "block",
                            lineHeight: "46px",
                            background: "none",
                            border: "none",
                            outline: "none"
                        }} />
                    </div>
                    <div style={{
                        marginBottom: '10px',
                        width: '260px',
                        height: '46px',
                        background: '#F2F3F7',
                        borderRadius: '10px',
                        display: 'flex',
                        alignItems: 'center'
                    }}>
                        <img src={paww} style={{ width: '20px', height: '20px', marginLeft: '10px' }} />
                        <input placeholder="请输入密码" value={inputValue.password} onChange={handle3} style={{
                            border: "none",
                            outline: "none",
                            width: '100',
                            height: '100%',
                            marginLeft: '10px',
                            display: "block",
                            lineHeight: "46px",
                            background: "none"
                        }} />
                        
                        
                    </div>
                    {/* <Input value={inputValue.mobile} onChange={handle1} placeholder="请输入手机号" style={{
                        marginBottom: '10px',
                        width: '260px',
                        height: '46px',
                        background: '#F2F3F7',
                        borderRadius: '10px',
                    }} />
                    <Input value={inputValue.areaCode} onChange={handle2} placeholder="请输入区号" style={{
                        marginBottom: '10px',
                        width: '260px',
                        height: '46px',
                        background: '#F2F3F7',
                        borderRadius: '10px',
                    }} />
                    <Input value={inputValue.password} onChange={handle3} placeholder="请输入密码" style={{
                        marginBottom: '10px',
                        width: '260px',
                        height: '46px',
                        background: '#F2F3F7',
                        borderRadius: '10px',
                    }}/> */}
                    <button style={{
                        width: '260px',
                        height: '46px',
                        background: 'linear-gradient( 135deg, #4AAEFA 0%, #29CCC1 52%, #2BD67B 100%)',
                        boxShadow: '0px 2px 8px 0px rgba(51,80,173,0.2)',
                        borderRadius: '10px',
                        border: 'none',
                        color: "#fff",
                        fontSize: "16px",
                        marginTop: "20px"
                    }} onClick={handleOk}>登录</button>
                </div>

            </div>
        </>
    );
};

export default App;